<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="robots" content="noindex">
    <title>Extension Sidebar Dashboard</title>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="assets/css/style.css"/>
    <link rel="stylesheet" href="assets/css/responsive.css">
    <link rel="stylesheet" href="../../thirdparty/fontawesome/css/all.min.css">
    <script src="assets/js/phoenix.js"></script>
    <script src="assets/js/code-editor.js"></script>
    <script src="../../thirdparty/floating-ui.core.umd.min.js"></script>
    <script src="../../thirdparty/floating-ui.dom.umd.min.js"></script>
    <script src="assets/js/notification-ui.js"></script>
    <style>
        #phoenix-pro-title {
            background: linear-gradient(
                    45deg,
                    #ff8c42,   /* deep orange */
                    #ffa500,   /* bright orange */
                    #ffcc70,   /* golden yellow */
                    #ffd700    /* rich gold */
            );
            background-clip: text;
            -webkit-background-clip: text; /* Chrome, Safari */
            color: transparent;            /* works in Firefox */
            -webkit-text-fill-color: transparent; /* Chrome, Safari */
            display: inline-block;
        }
    </style>
</head>
<body id="top" onload="init(); initCodeEditor();">
<div class="code-editor-card">
    <div class="editor-card-top d-flex align-items-center justify-content-between">
        <div class="editor-left d-flex align-items-center">
            <div class="editor-image">
                <img src="images/logo.png" alt="image"/>
            </div>
            <div class="editor-name">
                <h4 class="localize phoenix-free-title">{{APP_TITLE}}</h4>
                <h4 id="phoenix-pro-title" class="forced-hidden"><a href="https://account.phcode.dev" target="_blank" rel="noopener" class="phoenix-pro"><span class="pro-plan-name">Phoenix Pro</span><i class="fa-solid fa-feather orange-gold" style="margin-left: 4px;"></i></a></h4>
                <!-- Place this tag where you want the button to render. -->
                <div style="display: flex; justify-content: space-between;">
                    <span class="localize">{{BUILD_THE_WEB}}</span>
                    <span class="">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span class="icon-listing" style="display: flex; align-items: center">
                        <a id="githubIcon" href="https://github.com/phcode-dev/phoenix" rel="noopener" target="_blank">
                            <i class="fa-brands fa-github margin-right-1em" style="color: #6cc644"></i></a>
                        <a id="twitterIcon" href="https://twitter.com/phcodedev" rel="noopener" target="_blank">
                            <i class="fa-brands fa-twitter" style="color: #1da1f2; margin-right: .9em;"></i></a>
                        <a id="youtubeIcon" href="https://www.youtube.com/channel/UCNK2a8DKqPQQe3GlfTk-RHg" rel="noopener" target="_blank"
                        style="display: flex; align-items: center">
                            <img src="images/youtube.svg" alt="" style="width: 1.7em; margin-right: .9em;"></a>
                        <a id="sponsorIcon" href="https://github.com/sponsors/phcode-dev" target="_blank" rel="noopener noreferrer"
                           style="color: rgb(234, 74, 170); margin-right: .9em;">
                            <i class="far fa-heart"></i></a>
                    </span>
                </div>
                <div id="githubStarsButton" style="display: flex; justify-content: space-between; margin-top: 10px;">
                    <a class="github-button"
                       href="https://github.com/phcode-dev/phoenix"
                       data-color-scheme="no-preference: dark; light: dark; dark: dark;"
                       data-icon="octicon-star"
                       data-size="large"
                       data-show-count="true"
                       title="Star phcode.dev on GitHub"
                       aria-label="Star phcode-dev/phoenix on GitHub">Star</a>
                </div>
            </div>
        </div>
        <div class="editor-right">
            <button id="closeDialogueButton" class="close-btn">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16.1616 5.70972L5.70996 16.1613" stroke="white" stroke-width="2" stroke-linecap="round"
                          stroke-linejoin="round"/>
                    <path d="M5.70996 5.70972L16.1616 16.1613" stroke="white" stroke-width="2" stroke-linecap="round"
                          stroke-linejoin="round"/>
                </svg>

            </button>
        </div>
    </div>
    <div class="editor-project-content d-flex justify-content-between">
        <div class="project-content-left">
            <div id="recentProjectsContainer" class="recent-project-card">
                <div class="recent-head">
                    <h5 class="localize">{{CMD_RECENT_PROJECTS}}</h5>
                </div>
                <ul id="recentProjectList" class="recent-project-list">

                </ul>
            </div>
            <div id="noProjectContainer" class="no-project-card forced-hidden" style="overflow: hidden;">
                <!-- Do not load any heavy youtube assets here-->
                <h5 class="localize">{{PROJECTS_AT_A_GLANCE}}</h5>
                <div id="YTVideoFrame" style="display: flex; justify-content: center"></div>
                <span class="localize">{{PROJECT_AT_GLANCE_DESCRIPTION}}</span>
            </div>
        </div>
        <div class="project-content-right">
            <div id="project-items-container" class="project-content-inner text-center">
                <div class="project-head d-flex align-items-center justify-content-between">
                    <h4 class="tab-title mb-0 localize">{{START_PROJECT}}</h4>
                    <a id="viewMore" href="#" class="view-all localize">{{VIEW_MORE}}</a>
                </div>
                <ul class="project-type-list d-flex" style="padding-bottom: 0;margin-bottom: 0;border-bottom: none;">
                    <li>
                        <a id="defaultProjectButton" href="#" class="tabable" tabindex="1">
                            <img src="images/logo.png" alt="image">
                            <span class="localize"> {{PHOENIX_DEFAULT_PROJECT}}</span>
                        </a>
                    </li>
                    <li>
                        <a id="newHTMLBtn" href="#" class="tabable" tabindex="2" id="firstInputTabIndex">
                            <img src="images/tab-img2.png" alt="image">
                            <span>HTML5</span>
                        </a>
                    </li>
                    <li>
                        <a id="exploreBtn" href="#" class="tabable" tabindex="3">
                            <img src="images/video-game-gamepad.svg" alt="image">
                            <span class="localize">{{EXPLORE}}</span>
                        </a>
                    </li>
<!--                    <li>-->
<!--                        <a href="#" class="">-->
<!--                            <img src="images/projec-img1.png" alt="image">-->
<!--                            <span>Angular</span>-->
<!--                        </a>-->
<!--                    </li>-->
                </ul>
                <ul class="project-type-list d-flex mb-0 pb-0 border-bottom-0">
                    <li>
                        <a id="openFolderBtn" href="#" class="tabable" tabindex="4">
                            <img src="images/tab-img6.png" alt="image">
                            <span class="localize">{{CMD_OPEN_FOLDER}}</span>
                        </a>
                    </li>
                    <li>
                        <a id="newGitHubProject" href="#" class="tabable" tabindex="5">
                            <img src="images/git.svg" alt="image">
                            <span class="localize">{{GIT_PROJECT}}</span>
                        </a>
                    </li>
<!--                    <li>-->
<!--                        <a href="new-project-website.html" class="">-->
<!--                            <img src="images/tab-img8.png" alt="image">-->
<!--                            <span>From Website</span>-->
<!--                        </a>-->
<!--                    </li>-->
                </ul>
                <div id="download-phcode-banner" class="forced-hidden">
                    <img style="padding-top: 5px; padding-bottom: 5px;margin-right: 10px;" id="windows-logo" class="forced-hidden" src="../../images/microsoft-windows-logo-svg.svg" width="40px"/>
                    <img style="padding-top: 5px; padding-bottom: 5px;margin-right: 10px;" id="mac-logo" class="forced-hidden" src="../../images/MacOS_logo.svg" width="40px"/>
                    <img id="linux-logo" class="forced-hidden" src="../../images/linux.svg" width="45px"/>
                    <span id="download-string" >Download Desktop App</span>
                </div>
            </div>
        </div>
    </div>
    <div class="settings-icon dropdown" style="text-align: right; font-size: 15px;">
        <div class="dropdown-content">
            <div id="showWelcome"><span style="visibility: hidden" id="showWelcomeIndicator">✔ </span><span href="#" class="localize">{{PROJECT_SHOW_ON_STARTUP}}</span></div>
            <div id="showAbout"><span style="visibility: hidden">✔ </span><span href="#" class="localize">{{CMD_ABOUT}}</span></div>
        </div>
        <div style="display: flex; justify-content: end">
            <div class="dropbtn"><i class="fa-solid fa-gear"></i></div>
        </div>
    </div>
    <!-- focus guard in the end of the form -->
    <div class="focusguard" id="focusguard-2" tabindex="1000"></div>
    <!-- Nothing underneath this comment -->
</div>

<!-- Javascript -->
<script src="assets/thirdparty/jquery.min.js"></script>
<script src="assets/thirdparty/Popper.js"></script>
<script src="assets/thirdparty/bootstrap.min.js"></script>
<script src="assets/thirdparty/jquery.easing.min.js"></script>
<script src="assets/thirdparty/main.js"></script>
<script src="assets/thirdparty/perfect-scrollbar.jquery.min.js"></script>
<script src="assets/thirdparty/jquery.tabbable.min.js"></script>
<!-- Appear js -->
<script src="assets/thirdparty/appear.min.js"></script>
</body>
</html>
